<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>3.天气案例_深度监视</title>
    <script src="../js/vue.min.js"></script>
</head>

<body>
    <div id="root">
        <h2>天气很 {{weather}} </h2>
        <button @click="isHot = !isHot">切换天气</button>
        <hr>
        <h3>a 的值是:{{numbers.a}}</h3>
        <button @click="addNum()">点我让a+1</button>
        <h3>b 的值是:{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b+1</button>

    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    isHot: true,
                    numbers: {
                        a: 1,
                        b: 2
                    }
                }
            },
            methods: {
                /*   changeWeather() {
                      this.isHot = !this.isHot;
                  } */
                addNum() {
                    this.numbers.a++;
                }
            },
            computed: {
                weather() {
                    return this.isHot ? '炎热' : '凉爽';
                }
            },
            watch: {
                isHot: {
                    // 当属性 isHot 发生了改变，处理 handler 的调用
                    handler(newValue, oldValue) {
                        console.log('isHot 发生了变化', newValue, oldValue);
                    }
                },
                // 'numbers.a': {
                //     handler(newValue, oldValue) {
                //         console.log('numbers.a的值发生了变化', newValue, oldValue)
                //     }
                // },
                // 监视对象中的多级属性的变化（深度监视）
                numbers: {
                    deep: true,
                    handler() {
                        console.log('numbes 发生了变化');
                    }
                }


            }
        });

    </script>

</body>

</html>